<template>
  <DynamicList
    ref="userListTable"
    v-bind="userListColumns"
    @load-data="setPage"
    @reset-data="onResetData"
  >
    <template #tableTop>
      <a-space class="flex-wrap" size="small">
        <a-button v-if="$auth('user-add')" type="primary" @click="router.push('/user/userDetail')">
          <PlusOutlined />
          新增
        </a-button>
      </a-space>
    </template>
  </DynamicList>
</template>

<script setup lang="tsx">
  import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { Avatar, message, Modal, Tag } from 'ant-design-vue';
  import { deleteUser, disableUser, userApi } from '@/api/member';
  import { formatToDateTime } from '@/utils/dateUtil';
  import DynamicList from '@/components/dynamicList/index.vue';
  import { RequestEnum } from '@/enums/httpEnum';
  import useRequestList from '@/hooks/useRequestList';
  import { verifyAuth } from '@/core/permission';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { genderList, userStatusEnum, userStatusList } from '@/enums/userUpdateEnum';
  import { getFileHttpUrl } from '@/utils/urlUtils';
  import { StatusEnum } from '@/enums/DisableEnum';

  defineOptions({
    name: 'memberList',
  });

  const userListTable = ref<any>(null);
  const router = useRouter();
  const { list, page, setPage, loading } = useRequestList({
    apiKey: userApi.userList,
    type: RequestEnum.GET,
  });
  const userListColumns = ref({
    columns: [
      {
        title: '序号',
        width: 30,
        align: 'center',
        dataIndex: 'index',
        fixed: 'left',
        customRender: ({ record, text, index }) => index + 1,
      },
      {
        title: '用户ID',
        width: 50,
        align: 'center',
        dataIndex: 'id',
      },
      {
        title: '头像',
        width: 50,
        align: 'center',
        dataIndex: 'avatar',
        customRender: ({ text }) => {
          return text ? <a-image width="80px" src={getFileHttpUrl(text)} /> : '-';
        },
      },
      {
        title: '昵称',
        width: 50,
        align: 'center',
        dataIndex: 'nickname',
        search: true,
        component: ComponentsTypeEnum.Input,
      },
      {
        title: '手机号码',
        width: 50,
        align: 'center',
        dataIndex: 'mobile',
        search: true,
        component: ComponentsTypeEnum.Input,
        customRender: ({ text }) => {
          return text ? text : '-';
        },
      },
      {
        title: '性别',
        width: 80,
        align: 'center',
        dataIndex: 'sex',
        search: true,
        component: ComponentsTypeEnum.Select,
        componentProps: {
          options: genderList,
        },
        customRender: ({ text }) => {
          switch (text) {
            case '1':
              return '男';
            case '2':
              return '女';
            default:
              return '未知';
          }
        },
      },
      {
        title: '年龄',
        width: 50,
        align: 'center',
        dataIndex: 'age',
      },
      {
        title: '所在地',
        width: 50,
        align: 'center',
        dataIndex: 'address',
      },
      {
        title: '邮箱',
        width: 50,
        align: 'center',
        dataIndex: 'email',
        search: true,
        component: ComponentsTypeEnum.Input,
      },
      {
        title: '最后登陆IP',
        width: 50,
        align: 'center',
        dataIndex: 'lastIp',
      },
      {
        title: '最后登陆时间',
        width: 50,
        align: 'center',
        dataIndex: 'lastTime',
        customRender: ({ text }) => {
          return text ? formatToDateTime(text) : '-';
        },
      },
      {
        title: '注册ip',
        width: 50,
        align: 'center',
        dataIndex: 'createIp',
      },
      {
        title: '创建时间',
        width: 50,
        align: 'center',
        dataIndex: 'createTime',
        customRender: ({ text }) => {
          return text ? formatToDateTime(text) : '-';
        },
      },
      {
        title: '状态',
        dataIndex: 'isLock',
        width: 100,
        align: 'center',
        fixed: 'right',
        search: true,
        component: ComponentsTypeEnum.Select,
        componentProps: {
          options: userStatusList,
        },
        customRender: ({ record }) => {
          return (
            <a-switch
              onChange={() => updateStatus(record)}
              v-model:checked={record.isLock}
              un-checked-value={userStatusEnum.DISABLED}
              checked-value={userStatusEnum.NORMAL}
              un-checked-children={'禁用'}
              checked-children={'启用'}
            />
          );
        },
      },
      {
        title: '操作',
        width: 150,
        dataIndex: 'operation',
        align: 'center',
        fixed: 'right',
        actions: [
          {
            title: '详情',
            vIf: verifyAuth('user-detailPage'),
            onClick: (record) => {
              router.push(`/member/memberDetail?id=${record.id}`);
            },
          },
          // {
          //   title: '删除',
          //   vIf: verifyAuth('user-delete'),
          //   onClick: (record) => {
          //     deleteConfirmUser(record);
          //   },
          // },
        ],
      },
    ],
    pageParams: page,
    list,
    loading,
  });

  const deleteConfirmUser = async (record) => {
    Modal.confirm({
      title: '确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      centered: true,
      onOk: async () => {
        const res = await deleteUser({ id: record.id });
        if (res) {
          message.success(res?.msg);
          userListTable.value && userListTable.value.resetFields();
        }
      },
    });
  };

  const onResetData = (queryParams: Object) => {
    setPage(queryParams);
  };

  const updateStatus = async (record) => {
    // console.info('渲染后的数据===> ', record.isLock);
    // 反向赋值 当前状态是Y则禁用, 这时需要取反
    // record.isLock = ynToBoolean(record.isLock) ? 'N' : 'Y';
    const res = await disableUser({
      ids: [record.id],
      isLock: record.isLock,
    });
    if (res) {
      message.success(res?.msg || '修改状态成功!');
    }
  };
</script>

<style></style>
